<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-form label-width="80px">
          <el-row :gutter="20">
            <el-col :span="16"
              ><div class="grid-content bg-purple">
                <el-form-item label="关键字">
                  <el-input v-model="frame" placeholder="请输入内容" ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="8"
              ><div class="grid-content bg-purple" style="float: right">
                <el-button @click="eliminate">清除</el-button>
                <el-button type="primary" @click="search">搜索</el-button>
              </div></el-col
            >
          </el-row>
        </el-form>
        <el-alert  type="info" :closable="false">
          <i class="el-icon-info" style="font-size: 16px;"></i>
          <span style="font-size: 13px;margin-left: 5px;">
          数据一共{{form.counts}}条
          </span>
        </el-alert>
        <el-table :data="form.items" style="width: 100%;">
          <el-table-column prop="id" label="编号" width="220">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="80">
          </el-table-column>
          <el-table-column label="题目编号" width="220">
            <template slot-scope="scope">
              <div v-for="item in scope.row.questionIDs" :key="item.number" @click="tancc(item.id)">
              <a href="javascript:;" style="color: rgb(0, 153, 255);">{{item.number}}</a>
              </div>
              </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间" width="180">
          </el-table-column>
          <el-table-column prop="totalSeconds" label="答题时间(s)" width="295">
          </el-table-column>
          <el-table-column prop="accuracyRate" label="正确率(%)" width="293">
          </el-table-column>
          <el-table-column prop="userName" label="录入人" width="293">
          </el-table-column>
          <el-table-column label="操作" width="80">
      <template slot-scope="scope">
        <el-button type="danger" icon="el-icon-delete" circle plain @click="delQuestion(scope.row)"></el-button>
      </template>
    </el-table-column>
        </el-table>
        <div class="block" style="margin-top: 20px;text-align: right;">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="Number(form.page)"
      :page-sizes="[20, 30, 50, 100]"
      :page-size="20"
      layout="prev,pager,next,sizes,jumper"
      background
      :total="form.counts">
    </el-pagination>
  </div>
      </el-card>
    </div>
    <articlesPpreview ref='form' :dialogVisible.sync='dialogVisible'></articlesPpreview>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
import articlesPpreview from '@/module-hmmm/components/articles-preview.vue'
export default {
  data () {
    return {
      dialogVisible: false,
      form: [],
      // 输入框
      frame: '',
      pagesize: 20,
      page: 1
    }
  },
  components: {
    articlesPpreview
  },
  created () {
    this.getRandoms()
  },
  methods: {
    async getRandoms () {
      const { data } = await randoms({ page: this.page, pagesize: this.pagesize })
      this.form = data
      console.log(data)
      this.form.items.forEach(item => {
        if (item.questionType === '1') {
          item.questionType = '单选'
        } else if (item.questionType === '2') {
          item.questionType = '多选'
        } else if (item.questionType === '3') {
          item.questionType = '简答'
        }
      })
    },
    // 删除
    delQuestion (row) {
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
      }).then(async () => {
        await removeRandoms(row)
        this.$message.success('删除成功!')
        this.getRandoms()
      }).catch(() => {

      })
    },
    // 清除
    eliminate () {
      this.frame = ''
    },
    // 搜索
    async search () {
      const { data } = await randoms({ keyword: this.frame, page: 1, pagesize: 20 })
      this.form = data
    },
    // 每页多少条
    handleSizeChange (val) {
      this.pagesize = val
      this.page = 1
      this.getRandoms()
    },
    // 当前多少页
    handleCurrentChange (val) {
      this.page = val
      this.getRandoms()
    },
    async tancc (id) {
      const { data } = await detail({ id: id })
      this.dialogVisible = true
      this.$refs.form.rowdata = data
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-input {
  width: 240px;
}
::v-deep .el-button--medium{
  font-size: 12px;
}
::v-deep .el-input--medium .el-input__inner{
  width: 50px;
}
::v-deep .el-pagination__editor.el-input{
  width: 50px;
}
::v-deep .el-form-item__content .el-input__inner{
  width: 174px;
  height: 32px;
  line-height: 32px;
}
::v-deep .el-pagination__jump{
  margin-left: 0;
}
</style>
